import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity
} from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import '../features/Phone';
import Ranklist from './Ranking/Ranklist';

const Tabtop = createMaterialTopTabNavigator();

const Ranking = ({navigation}) => {
    return (
        <View style={{width:w, padding:10, backgroundColor:'lightblue'}}>
            {/* <TouchableOpacity
                activeOpacity={0.7}
                onPress={()=>{navigation.navigate('Ranklist',{named:'商业香水'})}}
            >
                <View style={[styles.per,{marginBottom:16}]}>
                    <Text style={styles.txt1}>商业香水</Text>
                    <Text style={styles.txt2}>香奈儿、迪奥、爱马仕无疑就是我们所熟知的大众品牌了，一般来说都是香水与时装品牌的结合。
                        喜欢大众品牌的原因可能跟讨厌它们的原因一样，他们的Logo可以拿来晒朋友圈，他们的香味经常会被闻到，
                        好穿、实用、接受度高是它们的特点。
                    </Text>
                </View>
            </TouchableOpacity>

            <TouchableOpacity
                activeOpacity={0.7}
                onPress={()=>{navigation.navigate('Ranklist',{named:'沙龙香水'})}}
            >
                <View style={styles.per}>
                    <Text style={styles.txt1}>沙龙香水</Text>
                    <Text style={styles.txt2}>沙龙香水一般都是专业做香水的品牌，而且拥有一定的历史，不注重瓶身设计，
                        很多都用统一的香水瓶。由于它们不需要或者不屑与大众品牌去拼销量，这意味着他们不太会迎合大众消费者的口味，
                        这样在创作方面就摆脱了很多束缚。个性、创意、与众不同是它们的特点。
                    </Text>
                </View>
            </TouchableOpacity> */}

            {/* 分类 */}
            <View style={{width:w, height:h*0.9}}>
                <Tabtop.Navigator
                    screenOptions={{
                        tabBarActiveTintColor:'orange',
                        tabBarInactiveTintColor:'black',
                        //滑动小横线
                        tabBarIndicatorStyle: {
                            height: 2,
                            backgroundColor: 'orange'
                        },
                        tabBarContentContainerStyle: {
                            height: 40,
                            alignItems: 'center',
                        },
                        tabBarLabelStyle: {
                            fontSize: 14
                        },
                        tabBarItemStyle: {
                            width: w/4
                        },
                        tabBarPressColor: 'lightyellow',
                        tabBarStyle: {
                            backgroundColor: 'lightblue',
                        },
                        tabBarScrollEnabled: true
                    }}
                >
                    <Tabtop.Screen name="商业香水" component={Ranklist} />
                    <Tabtop.Screen name="沙龙香水" component={Ranklist} />
                </Tabtop.Navigator>
            </View>
        </View>
    )
};

const styles = StyleSheet.create({
    per: {
        width: w-20,
        height: h*0.42-18,
        padding: 30,
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#696969',
        backgroundColor:'lightyellow'
    },
    txt1: {
        fontSize: 30,
        color: 'orange',
        margin: 20
    },
    txt2: {
        fontSize: 16,
        color: 'gray'
    }
})

export default Ranking
